<template>
	<view class="goods">
		<!-- 导航栏 -->
		<navBar isBack></navBar>
		
		<!-- 商品轮播图 -->
		<view class="g_banner">
			<swiper @change="changeBanner" autoplay circular>
				<swiper-item v-for="(item,index) in goodsInfo.roundImgs" :key="index">
					<image :src="item.image_path"></image>
				</swiper-item>
			</swiper>
			<view class="g_bDots">
				<view class="g_bDot" :class="{'active': bannerIndex === index}" v-for="(item, index) in goodsInfo.roundImgs">
					<view class="g_bIcon"></view>
				</view>
			</view>
		</view>
		
		<!-- 商品基础信息 -->
		<view class="g_base">
			<view>
				<view class="g_bSell">{{goodsInfo.volume}}人付款</view>
				<view class="g_bPrice">￥<text>{{goodsInfo.productPrice}}</text></view>
			</view>
			<view>
				<view class="g_bShare">
					<view class="g_bsIcon"><view class="iconfont icon-share"></view></view>
					<view class="g_bsTxt">分享</view>
				</view>
				<view class="g_bName omit-2">{{goodsInfo.name}}</view>
			</view>
		</view>
		
		<!-- 其他 -->
		<view class="g_it">
			<view class="g_iGroup">
				<view class="g_iItem">
					<view class="g_iLabel">优惠</view>
					<view class="g_iCont" @click="receive">
						<view class="g_iIcon"><image src="https://manager.ryz1620.com/static/common/icon_more.png"></image></view>
						<view class="g_iTxt">优惠券</view>
					</view>
				</view>
				<view class="g_iItem">
					<view class="g_iLabel">活动</view>
					<view class="g_iCont">
						<view class="g_iIcon"><image src="https://manager.ryz1620.com/static/common/icon_more.png"></image></view>
						<view class="g_iTxt">家居节</view>
					</view>
				</view>
			</view>
		</view>
		<view class="g_it" v-if="goodsInfo.isMoreSize">
			<view class="g_iGroup">
				<view class="g_iItem">
					<view class="g_iLabel">选择</view>
					<view class="g_iCont" @tap="showSizePop">
						<view class="g_iIcon"><image src="https://manager.ryz1620.com/static/common/icon_more.png"></image></view>
						<view class="g_iTxt">颜色分类</view>
						<view class="g_iSelect">
							<view class="g_isItem"></view>
							<view class="g_isItem"></view>
							<view class="g_isItem"></view>
							<view class="g_isItem"></view>
							<view class="g_isLabel">共有10种颜色分类可选</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 商品详情 -->
		<view class="g_detail">
			<view class="g_dTitle">商品详情</view>
			<view class="g_dBox">
				<view class="g_dItem">
					<view class="g_dGroup">
						<view class="g_dLabel">
							<text>橱</text>
							<text>柜</text>
							<text>品</text>
							<text>牌</text>
						</view>
						<view class="g_dVal omit-2">欧派</view>
					</view>
					<view class="g_dGroup">
						<view class="g_dLabel">
							<text>型</text>
							<text>号</text>
						</view>
						<view class="g_dVal">橱柜15</view>
					</view>
				</view>
				<view class="g_dItem">
					<view class="g_dGroup">
						<view class="g_dLabel">
							<text>风</text>
							<text>格</text>
						</view>
						<view class="g_dVal omit-2">简约现代</view>
					</view>
					<view class="g_dGroup">
						<view class="g_dLabel">
							<text>柜</text>
							<text>体</text>
							<text>材</text>
							<text>质</text>
						</view>
						<view class="g_dVal">实木颗粒板</view>
					</view>
				</view>
				<view class="g_dItem">
					<view class="g_dGroup">
						<view class="g_dLabel">
							<text>台</text>
							<text>面</text>
							<text>材</text>
							<text>质</text>
						</view>
						<view class="g_dVal omit-2">石英石</view>
					</view>
					<view class="g_dGroup">
						<view class="g_dLabel">
							<text>台</text>
							<text>版</text>
							<text>厚</text>
							<text>度</text>
						</view>
						<view class="g_dVal">20mm</view>
					</view>
				</view>
				<view class="g_dItem">
					<view class="g_dGroup">
						<view class="g_dLabel">
							<text>环</text>
							<text>保</text>
							<text>级</text>
							<text>别</text>
						</view>
						<view class="g_dVal omit-2">E1</view>
					</view>
					<view class="g_dGroup">
						<view class="g_dLabel">
							<text>保</text>
							<text>修</text>
							<text>时</text>
							<text>长</text>
						</view>
						<view class="g_dVal">5年</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 商品图片列表 -->
		<view class="g_productshow">
			<view class="g_pItem">
				<image mode="widthFix" src="https://manager.ryz1620.com/static/enter/bg_6.png"></image>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="g_btm">
			<!-- <view class="g_bShim"></view> -->
			<view class="g_bCan">
				<view class="g_bRight">
					<view class="g_brAdd" @tap="addCart">加入清单</view>
					<!-- <view class="g_brBuy">立即购买</view> -->
				</view>
				<view class="g_bLeft">
					<view class="g_blItem" @tap="toPage('store')">
						<view class="g_blIcon"><view class="iconfont icon-shop"></view></view>
						<view class="g_blTxt">店铺</view>
					</view>
					<view class="g_blItem">
						<view class="g_blIcon"><view class="iconfont icon-comment2"></view></view>
						<view class="g_blTxt">客服</view>
					</view>
					<view class="g_blItem" @tap="toPage('list')">
						<view class="g_blIcon"><view class="iconfont icon-List"></view></view>
						<view class="g_blTxt">清单</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 弹窗-分享 -->
		<view class="g_share" @touchmove.stop.prevent="moveHandle">
			<view class="g_sBg"></view>
			<view class="g_sBox"></view>
			<view class="g_sPoster">
				<view class="g_spCan"></view>
			</view>
		</view>
		
		
		<!-- 规格弹框 -->
		<view class="gL_specShadow" v-if="sizePop">
			<view class="gL_specInfo">
				<view class="gL_specInfoTop">
					<view class="spec_shop">
						<image src="https://manager.ryz1620.com/static/distri/distriOrder/cg.png" mode=""></image>
						<view class="spec_shopInfo">
							<span>¥7798.00</span>
							<p>编号：1000320203</p>
						</view>
						<view class="spec_close" @click="_specClose">×</view>
					</view>
					<!-- 规格循环↓ -->
					<view class="spec_option" v-for="(item,index) in specList" :key="index">
						<view class="spec_title">{{item.specName}}</view>
						<view class="spec_item">
							<span v-for="(item1,index1) in item.child" :key="index1" @click="_clicSpec(index,index1)" :class="{specActive:spec_sel[index] == index1}">{{item1.specitem}}</span>
						</view>
					</view>
					
					<!-- 数量 -->
					<view class="spec_shopNum">
						数量
						<view class="shopNum_oper">
							<span>-</span>
							<span class="shopNum">1</span>
							<span>+</span>
						</view>
					</view>
					
					<!-- 加入清单按钮 -->
					<view class="spec_joinBtn">加入清单</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import URL from '@/config/url.js'
import navBar from '@/components/navBar/navBar.vue'
import service_mall from '@/service/mall.js'

export default {
	components: { navBar },
	
	data() {
		return {
			ImageUrl: URL.IMAGE,
			goodsId: null,
			goodsInfo:{
				// 商品所属店铺信息
				storeId: 1,                // 所属店铺id
				storeName: '',            // 所属店铺名称
				storeLogo: '',            // 所属店铺logo
				// 商品信息
				// 商品价格，只作产品列表产品详情页展示，
				// 实际使用价格：单规格直接取规格数据，多规格根据所选规格变动
				productPrice: 2699,              // 商品价格
				productCostPrice: 2899,  // 商品原价
				goodsId: 1,              // 商品id
				name: '欧派橱柜定制北欧简约厨房芬迪整体组装厨柜石英石台面 预付金',              // 商品名
				detail: '',                  // 商品详情
				volume: 266,                   // 商品销量
				roundImgs:[{ 							// 商品图片列表
					image_id:1,
					image_path:'https://manager.ryz1620.com/static/enter/bg_6.png'
				},{
					image_id:2,
					image_path:'https://manager.ryz1620.com/static/enter/bg_3.png'
				},{
					image_id:3,
					image_path:'https://manager.ryz1620.com/static/enter/bg_4.png'
				}],           
				
				// 商品规格信息
				isMoreSize: 1,           // 是否是多规格商品  1: 单规格（不是） 2：多规格（是）
				sizeList: [],
				sizeParams: '',
				sizeId: null,         // 商品规格id
				price: null,          // 商品价格
				costPrice: null,      // 商品原价
				stockNum: null,       // 商品库存
			},
			
			// 规格列表
			specList:[{
				specName:'颜色',
				child:[{
					specitem:'陶瓷黑',
					specitem_id:1
				},{
					specitem:'陶瓷红',
					specitem_id:2
				}]
			},{
				specName:'规格',
				child:[{
					specitem:'3m地柜+3m台面（20mm）',
					specitem_id:3
				},{
					specitem:'2.8地柜+2.8m台面（20mm）',
					specitem_id:4
				}]
			},{
				specName:'选择版本',
				child:[{
					specitem:'标准版',
					specitem_id:5
				}]
			}],
			spec_id:[],
			spec_sel:[], //储存点击的规格
			sizePop:false,//规格弹框
			
			bannerIndex: 0,
			// 规格
			sizePop: false,
			sizeImage: null,   // 规格图片
			sizePrice: null,   // 规格价格
			sizeNum: 1,
			// 购物车
			cart: null,
		}
	},
	
	onLoad(options) {
		// testcode
		options.goodsId = 100
		console.log(options)
		this.goodsId = options.goodsId
		this.cart = this.$store.state.cart.cart
		// this.getData()
	},
	
	methods: {
		
		// 添加购物车
		addCart() {
			let goodsInfo = this.goodsInfo
			// 多规格商品 => 选择规格
			if (goodsInfo.isMoreSize) {
				this.showSizePop()
			}
			// 单规格
			else {
				// 先判断库存是否足够
				if (goodsInfo.stockNum < 1) {
					uni.showToast({ title: '库存不足111111111111111111', icon: 'none' })
					return
				} 
				
				// 判断购物车中是否存在同一店铺，同一尺寸的商品
				let cart = this.cart
				let isStore = null    // 购物车中是否存在同一店铺  null: 不存在  其他（索引）：存在
				let isGoods = null    // 购物车中是否存在同一商品
				let store = null
				let goods = null
				let storeId = goodsInfo.storeId
				let sizeId = goodsInfo.sizeId
				
				// 寻找购物车中是否存在同一店铺，同一商品
				for (let i = 0; i < cart.length; i++) {
					// 存在同一店铺
					if (cart[i].storeId == storeId) {
						isStore = i
						store = cart[i]
						
						let goods = cart[i].list
						for (let j = 0; j < goods.length; j++) {
							// 存在同一商品
							if (goods[j].sizeId == sizeId) {
								// 数量+1是否超过库存
								if (goods[j].num + 1 > goodsInfo.stockNum) {
									uni.showToast({ title: '再添加购物车库存不足11111111111', icon: 'none' })
									return
								}
								
								isGoods = j
								goods = goods[j]
								break
							}
						}
					}
				}
				
				// 存在同一店铺
				if (isStore != null) {
					// 存在同一商品
					if (isGoods != null) {
						cart[isStore].list[isGoods].num++
					}
					// 不存在同一商品
					else {
						cart[isStore].list.unshift({
							name: goodsInfo.name,
							sizeId: goodsInfo.sizeId,        // 尺码id
							price: goodsInfo.price,          // 价格
							costPrice: goodsInfo.costPrice,  // 原价
							num: 1,                          // 数量
							isMoreSize: false,
						})
					}
				}
				// 不存在同一店铺同一商品 => 添加店铺添加商品
				else {
					cart.unshift({
						storeId: goodsInfo.storeId,      // 店铺id
						storeName: goodsInfo.storeName,  // 店铺名
						storeLogo: goodsInfo.storeLogo,  // 店铺logo
						select: false,
						list: [{
							name: goodsInfo.name,
							sizeId: goodsInfo.sizeId,        // 尺码id
							price: goodsInfo.price,          // 价格
							costPrice: goodsInfo.costPrice,  // 原价
							num: 1,                          // 数量
							isMoreSize: false,
							select: false
						}]
					})
				}
				

				this.$store.commit("cart/SET_cart", cart)
				uni.showToast({ title: "添加购物车成功", icon: "success" })
			}
		},
		
		// 添加购物车-规格弹窗
		addSizeCart() {
			
		},
		
		// 删减购物车-规格弹窗
		minusSizeCart() {
			if (this.sizeNum > 1) this.sizeNum--
		},
		
		
		
		// 弹窗-规格
		showSizePop() {
			this.sizePop = true
		},
		//规格弹框中的x
		_specClose(){
			this.sizePop = false
		},
		// 点击规格中的选项
		_clicSpec(index,index1){
			// console.log(index,index1);
			// console.log(e);
			this.spec_sel[index] = index1;
			this.spec_sel = this.spec_sel.concat([]); //因为数组是引用类型，对其中一个变量直接赋值不会影响到另一个变量（并未操作引用的对象），使用concat（操作了应用对象）
			this.spec_id[index] = this.specList[index].child[index1].id; //获取选中的id
			this.spec_id = this.spec_id.concat([]);
			console.log(this.spec_sel);
		},
		
		
		hideSizePop() {
			this.sizePop = false
		},
		
		// 跳转页面
		toPage(page, { storeId } = {}) {
			if (page === 'list') uni.navigateTo({ url: "/pagesGuide/shopGuide/guideList/guideList" })
			else if (page === 'store') uni.navigateTo({ url: "/pagesGuide/shopGuide/storeInfo/storeInfo?storeId=" + this.goodsInfo.storeId })
		},
		
		// 轮播图内容变动
		changeBanner(e) { this.bannerIndex = e.detail.current },
		
		// 禁止滑动
		moveHandle() {}
	}
}
</script>

<style lang="scss" scoped>
.goods {
	font-family: PingFang SC;
	// 商品轮播图
	.g_banner {height: 556rpx;background: #fff;position: relative;
		.g_bDots {width: 100%;position: absolute;bottom: 20rpx;left: 0;display: flex;justify-content: center;}
		.g_bDot {padding: 16rpx 8rpx;
			&.active .g_bIcon {width: 22rpx;border-radius: 10rpx;background: #16181c;}
		}
		.g_bIcon {width: 10rpx;height: 10rpx;border-radius: 50%;background: rgba(26, 28, 32, .4);}
	}
	
	// 商品基础信息
	.g_base {background: #fff;overflow: hidden;
		.g_bSell {height: 40rpx;line-height: 40rpx;color: #939393;margin: 38rpx 36rpx 0 0;float: right;}
		.g_bPrice {height: 66rpx;line-height: 66rpx;color: #ef5854;font-size: 32rpx;font-weight: bold;padding: 24rpx 0 0 32rpx;box-sizing: content-box;
			& > text {font-size: 48rpx;}
		}
		.g_bShare {width: 124rpx;padding: 12rpx 0 16rpx;display: flex;flex-flow: column;justify-content: center;align-items: center;float: right;
			.g_bsIcon {width: 32rpx;height: 32rpx;line-height: 32rpx;text-align: center;font-size: 32rpx;}
			.g_bsTxt {height: 34rpx;line-height: 34rpx;text-align: center;font-size: 24rpx;margin-top: 6rpx;}
		}
		.g_bName {min-height: 88rpx;line-height: 44rpx;font-size: 32rpx;font-weight: bold;margin: 16rpx 16rpx 16rpx 34rpx;box-sizing: content-box;display: flex;align-items: center;}
	}
	
	// 其他
	.g_it {
		.g_iGroup {margin-top: 16rpx;background: #fff;}
		.g_iItem {min-height: 90rpx;
			&:last-child .g_iCont::after {content: none;}
		}
		.g_iLabel {min-width: 126rpx;height: 90rpx;line-height: 90rpx;padding: 0 12rpx 0 32rpx;float: left;}
		.g_iCont {position: relative;overflow: hidden;
			&::after {content: "";width: 100%;height: 1px;background: #f4f4f4;position: absolute;bottom: 0;left: 0;transform: scaleY(.5);}
		}
		.g_iIcon {width: 32rpx;height: 32rpx;position: absolute;top: 28rpx;right: 36rpx;}
		.g_iTxt {height: 90rpx;line-height: 90rpx;color: #666;}
		.g_iSelect {padding-bottom: 24rpx;display: flex;
			.g_isItem {width: 60rpx;height: 60rpx;margin-right: 16rpx;border-radius: 8rpx;background: #f6f7fb;}
			.g_isLabel {width: 284rpx;height: 60rpx;line-height: 60rpx;text-align: center;color: #939393;font-size: 22rpx;border-radius: 8rpx;background: #f6f7fb;}
		}
	}
	
	// 商品详情
	.g_detail {padding: 48rpx 36rpx 48rpx 32rpx;margin-top: 16rpx;background: #fff;
		.g_dTitle {height: 44rpx;line-height: 44rpx;color: #000;font-size: 32rpx;}
		.g_dBox {margin-top: 24rpx;border: 1px solid rgba(0, 0, 0, .08);}
		.g_dItem {height: 84rpx;border-bottom: 1px solid rgba(0, 0, 0, .08);display: flex;
			&:last-child {border: none;}
		}
		.g_dGroup {width: 50%;display: flex;align-items: center;}
		.g_dLabel {min-width: 146rpx;height: 84rpx;line-height: 84rpx;color: #000;font-size: 24rpx;padding: 0 24rpx;display: flex;justify-content: space-between;align-items: center;}
		.g_dVal {max-height: 68rpx;line-height: 34rpx;color: #787878;font-size: 24rpx;}
	}
	//商品图片列表
	.g_productshow{
		margin-bottom: 100rpx;
		.g_pItem{
			image{width: 100%;height: 578rpx;}
		}
	}
	
	// 底部操作栏
	.g_btm {
		.g_bShim {height: 100rpx;box-sizing: content-box;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);}
		.g_bCan {width: 100vw;height: 100rpx;background: #fff;position: fixed;bottom: 0;left: 0;box-sizing: content-box;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);}
		.g_bRight {height: 100%; padding-right: 22rpx;float: right;display: flex;align-items: center;}
		.g_brAdd, .g_brBuy {width: 380rpx;height: 72rpx;line-height: 72rpx;text-align: center;color: #fff;font-weight: bold;border-radius: 10rpx ;background: #c3ab7c;}
		.g_brBuy {width: 204rpx;border-radius: 0 10rpx 10rpx 0;background: #333;background: #ccc;}
		.g_bLeft {height: 100%;padding: 0 42rpx; overflow: hidden;display: flex;justify-content: space-between;align-items: center;}
		.g_blItem {width: 88rpx;}
		.g_blIcon {width: 40rpx;height: 40rpx;line-height: 40rpx;text-align: center;font-size: 40rpx;margin: 0 auto;}
		.g_blTxt {height: 32rpx;line-height: 32rpx;text-align: center;font-size: 22rpx;}
	}
	
	// 弹窗-分享
	.g_share {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;z-index: 1001;
		display: none;
		.g_sBg {width: 100%;height: 100%;background: rgba(0, 0, 0, .6);}
		.g_sBox {width: 100%;height: 338rpx;border-radius: 16rpx 16rpx 0 0;background: #fff;position: absolute;bottom: 0;left: 0;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);}
		.g_sPoster {position: absolute;bottom: 420rpx;left: 56rpx;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);}
		.g_spCan {width: 640rpx;height: 888rpx;border-radius: 16rpx;background: #fff;box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, .16);}
	}
}

// 规格弹框
		.gL_specShadow{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0,0,0,.8);
			z-index: 502;
			.gL_specInfo{
				width: 100%;
				// height: 1106rpx;
				position: absolute;
				left: 0;
				bottom: 0;
				background-color: #fff;
				border-radius: 24rpx 24rpx 0 0;
				padding: 36rpx 32rpx;
				.spec_shop{
					display: flex;
					margin-bottom: 40rpx;
					image{
						width: 178rpx;
						height: 178rpx;
						box-shadow: 0rpx 2rpx 2rpx rgba(136, 136, 136, 0.16);
					}
					.spec_shopInfo{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 16rpx;
						padding-top: 32rpx;
						font: 400 22rpx/28rpx PingFang SC;
						color: #939393;
						span{color: #E9423E; font: 600 34rpx/44rpx PingFangSC-Semibold;}
					}
					.spec_close{
						width: 41rpx;
						height: 41rpx;
						background-color: #F9F6F3;
						border-radius: 50%;
						text-align: center;
						line-height: 41rpx;
						margin-left: auto;
					}
				}
				
				.spec_option{
					margin-bottom: 24rpx;
					.spec_title{font: 600 28rpx/40rpx PingFang SC;color: #1A1C20;}
					.spec_item{
						display: flex;
						align-items: center;
						margin-top: 24rpx;
						flex-wrap: wrap;
						span{
							padding: 4rpx 24rpx;
							font: 400 24rpx/34rpx PingFang SC;
							color: #939393;
							text-align: center;
							background-color: #F5F5F5;
							border-radius: 22rpx;
							margin:0 16rpx 16rpx 0;
						}
						.specActive{background-color: #FEEFF2;color: #E9423E;}
					}
				}
				
				// 数量
				.spec_shopNum{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 4rpx;
					.shopNum_oper{
						display: flex;
						font: 600 34rpx/42rpx PingFang SC;
						align-items: center;
						span{width: 72rpx;height: 46rpx;text-align: center;}
						.shopNum{background-color: #F6F7FB;border-radius: 10rpx;}
					}
				}
				
				// 加入清单按钮
				.spec_joinBtn{
					width: 656rpx;
					height: 72rpx;
					background-color: #C3AB7C;
					border-radius: 8rpx;
					margin: 172rpx auto 0;
					text-align: center;
					font: 500 28rpx/72rpx PingFang SC;
					color: #fff;
				}
				
			}
		}


</style>